<!-- eslint-disable prettier/prettier -->
<script setup lang="ts">
// 04-computed和watch的区别
import { ref, computed, watch } from 'vue'
// computed特性
// - 它支持缓存，只有所依赖的数据发生了变化，才会重新计算。
// - 不支持异步，如有异步操作时，无法监听数据的变化。
const count = ref(0)

const countComputed = computed(() => {
  console.log('计算属性');
  
  // console.log('计算属性触发') //1.当页面初始渲染时会触发  2.当所依赖的值发生变化会触发
  return count.value * 2
})

const add = () => {
  count.value++
}
// watch特性
watch(
  () => count.value,
  (newVal, prevVal) => {
    console.log('修改最新的值:' + newVal)
    console.log('修改之前的值:' + prevVal)
  },
  { deep: true /*深度监听*/, immediate: false /*在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。*/}
)
</script>
<!-- eslint-disable prettier/prettier -->
<template>
  <div>
    <button @click="add">+</button>
    <div>数字：{{ countComputed }}</div>
  </div>
</template>
<!-- eslint-disable prettier/prettier -->
<style scoped lang="scss"></style>
